import React from 'react'
import {connect} from 'react-redux'
import menuRoute from 'routes/menuRoute'
import paymentService from 'containers/pay/pay-workbench/pay-workbench.service'
import {Alert, Badge, Table, Card, Icon, Spin} from 'antd'
import {messages,queryCurrencyPrecision} from 'share/common'
import moment from 'moment'
import 'styles/pay/pay-workbench/payment-detail.scss'

class PaymentDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      billsColumns: [
        {
          title: messages('pay.key104')/*单据编号*/,
          dataIndex: 'documentCode',
          render: (number, record) => (<a onClick={() => this.handleNum(record)}>{number}</a>)
        },
        {title: messages('pay.key105')/*单据类型*/, dataIndex: 'documentTypeName'},
        {title: messages('pay.key82')/*币种*/, dataIndex: 'currency'},
        {title: messages('pay.key106')/*单据总金额*/, dataIndex: 'documentTotalAmount', render: (value, record) => this.filterMoney(value, queryCurrencyPrecision(record.currency), true)},
        {title: messages('pay.key15')/*申请人*/, dataIndex: 'documentApplicant'}
      ],
      detailColumns: [
        {title: messages('pay.key21')/*付款批次号*/, dataIndex: 'customerBatchNo'},
        {title: messages('pay.key20')/*付款流水号*/, dataIndex: 'billcode'},
        {title: messages('pay.key82')/*币种*/, dataIndex: 'currency'},
        {title: messages('common.amount')/*金额*/, dataIndex: 'payAmount', render: (value, record) => this.filterMoney(desc, queryCurrencyPrecision(record.currency), true)},
        {title: messages('pay.key25')/*付款方式*/, dataIndex: 'paymentTypeName'}
      ],
      financeColumns: [
        {title: messages('pay.key108')/*摘要*/, dataIndex: 'abstract', render: value => value || '-'},
        {title: messages('pay.key109')/*公司*/, dataIndex: 'company', render: value => value || '-'},
        {
          title: messages('pay.key110')/*成本中心*/,
          dataIndex: 'costCenter',
          render: value => value || '-'
        },
        {title: messages('pay.key111')/*科目*/, dataIndex: 'subject', render: value => value || '-'}
      ],
      offHistoryColumns: [
        {title: messages('common.sequence')/*序号*/, dataIndex: 'index', render: (value, record, index) => index + 1},
        {
          title: messages('pay.key112')/*核销日期*/,
          dataIndex: 'writeOffDate',
          render: value => value ? moment(value).format('YYYY-MM-DD') : '-'
        },
        {title: messages('pay.key104')/*单据编号*/, dataIndex: 'documentCode', render: value => value || '-'},
        {title: messages('pay.key113')/*核销金额*/, dataIndex: 'writeOffAmount', render: (value, record) => this.filterMoney(value, queryCurrencyPrecision(record.currency), true)},
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: 'status',
          render: status => <Badge text="" status={status ? 'success' : 'error'}/>
        },
      ],
      logColumns: [
        {title: messages('pay.key114')/*操作类型*/, dataIndex: 'operationTypeName'},//操作类型
        {title: messages('pay.key115')/*操作人*/, dataIndex: 'operationMan'},
        {
          title: messages('pay.key116')/*操作时间*/,
          dataIndex: 'operationTime',
          render: value => moment(value).format('YYYY-MM-DD HH:mm:ss')
        },
        {title: messages('common.remark')/*备注*/, dataIndex: 'remark', width: '30%', render: value => value || '-'},
      ],
      payStatus: {
        W: {label: messages('pay.key103')/*未支付*/, state: 'default'},
        P: {label: messages('pay.key62')/*支付中*/, state: 'processing'},
        S: {label: messages('pay.key66')/*支付成功*/, state: 'success'},
        F: {label: messages('pay.key69')/*支付失败*/, state: 'error'},
        R: {label: messages('pay.key42')/*重新支付*/, state: 'warning'},
      },
      payStatusValue: '',
      billsData: [],
      detailData: [],
      financeData: [],
      offHistoryDate: [],
      logData: [],
      payWorkbench: menuRoute.getRouteItem('pay-workbench', 'key'),
    };
  }

  handleNum = (params) => {
  };

  componentWillMount() {
    this.getInfo()
  }

  getInfo = () => {
    this.setState({loading: true});
    paymentService.getPayDetail(this.props.params.id).then(res => {
      if (res.status === 200) {
        this.setState({
          billsData: [res.data.payDocumentDTO],
          detailData: [res.data.payDetailDTO],
          financeData: [res.data.financialDTO],
          offHistoryDate: res.data.writeOffHistoryDTO,
          logData: res.data.operationDTO,
          payStatusValue: res.data.payStatus,
          loading: false
        })
      }
    })
  };

  handleBack = () => {
    this.context.router.replace(`${this.state.payWorkbench.url}?tab=${this.props.params.tab}&subTab=${this.props.params.subTab}`);
  };

  render() {
    const {loading, billsColumns, detailColumns, financeColumns, offHistoryColumns, logColumns, billsData, detailData, financeData, offHistoryDate, logData, payStatusValue, payStatus} = this.state;
    const gridLeftStyle = {
      width: '20%',
      textAlign: 'left',
      padding: '10px 8px'
    };
    const gridRightStyle = {
      width: '80%',
      textAlign: 'left',
      padding: '10px 8px'
    };
    return (
      <div className="payment-detail">
        <Spin spinning={loading}>
          {payStatusValue && <Alert message={<Badge text={payStatusValue ? payStatus[payStatusValue].label : ''}
                                                    status={payStatusValue ? payStatus[payStatusValue].state : 'default'}/>}
                                    type="info" className="top-result"/>}
          <h3 className="header-title">{messages('pay.key118')/*付款单据*/}</h3>
          <Table rowKey="documentCode"
                 columns={billsColumns}
                 dataSource={billsData}
                 pagination={false}
                 bordered
                 size="middle"/>
          <h3 className="header-title">{messages('pay.key119')/*付款详情*/}</h3>
          <Table rowKey="draweeId"
                 columns={detailColumns}
                 dataSource={detailData}
                 pagination={false}
                 bordered
                 size="middle"/>
          {detailData[0] && (
            <div>
              <Card bordered={false}>
                <Card.Grid style={gridLeftStyle}>{messages('pay.key159')/*描述*/}：</Card.Grid>
                <Card.Grid style={gridRightStyle}>{detailData[0].remark || '-'}</Card.Grid>
                <Card.Grid style={gridLeftStyle}>{messages('pay.key160')/*付方信息*/}：</Card.Grid>
                <Card.Grid
                  style={gridRightStyle}>{detailData[0].draweeCompanyName} {detailData[0].draweeAccountName} {detailData[0].draweeAccountNumber}</Card.Grid>
                <Card.Grid style={gridLeftStyle}>{messages('pay.key161')/*账户信息*/}：</Card.Grid>
                <Card.Grid style={gridRightStyle}>{detailData[0].currency} {detailData[0].exchangeRate}</Card.Grid>
                <Card.Grid style={gridLeftStyle}>{messages('pay.key162')/*出纳*/}：</Card.Grid>
                <Card.Grid style={gridRightStyle}>{detailData[0].draweeName}</Card.Grid>
              </Card>
              <Card bordered={false}>
                <Card.Grid style={gridLeftStyle}>{messages('pay.key163')/*收方类型*/}：</Card.Grid>
                <Card.Grid style={gridRightStyle}>{detailData[0].partnerCategoryName || '-'}</Card.Grid>
                <Card.Grid style={gridLeftStyle}>{messages('pay.key164')/*收方信息*/}：</Card.Grid>
                <Card.Grid
                  style={gridRightStyle}>{detailData[0].payeeAccountName} {detailData[0].payeeAccountNumber}</Card.Grid>
              </Card>
            </div>
          )}
          <h3 className="header-title">{messages('pay.key126')/*财务信息*/}</h3>
          <Table rowKey={(record, index) => index}
                 columns={financeColumns}
                 dataSource={financeData}
                 pagination={false}
                 bordered
                 size="middle"/>
          {/*借款单 或 预付款单*/}
          {billsData[0] && (billsData[0].documentTypeCode === 'PAYMENT_REQUISITION' || billsData[0].documentTypeCode === 'PREPAYMENT_REQUISITION') && (
            <div>
              <h3 className="header-title">核销历史</h3>
              <Table rowKey="id"
                     columns={offHistoryColumns}
                     dataSource={offHistoryDate}
                     pagination={false}
                     bordered
                     size="middle"/>
            </div>
          )}
          <h3 className="header-title">{messages('pay.key128')/*操作日志*/}</h3>
          <Table rowKey={(record, index) => index}
                 columns={logColumns}
                 dataSource={logData}
                 pagination={false}
                 style={{marginBottom: '50px'}}
                 expandedRowRender={record => <p>{record.bankMessage || messages('pay.key129')/*无*/}</p>}
                 size="middle"/>
          <a style={{fontSize: '14px', paddingBottom: '20px'}} onClick={this.handleBack}>
            <Icon type="rollback" style={{marginRight: '5px'}}/>{messages('common.back')/*返回*/}
          </a>
        </Spin>
      </div>
    )
  }

}

PaymentDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps() {
  return {}
}

export default connect(mapStateToProps, null, null, {withRef: true})(PaymentDetail);
